<template>
    <view class="container">
        <!-- 顶部导航栏 -->
        <view class="nav-bar">
            <view class="left">
                <u-icon name="arrow-left" size="32" color="#333" @click="goBack"></u-icon>
            </view>
            <view class="title">健康报告</view>
            <view class="right">
                <u-icon name="share" size="32" color="#333" @click="shareReport"></u-icon>
            </view>
        </view>
        
        <!-- 健康评分 -->
        <view class="section">
            <view class="score-card">
                <view class="score">{{report.score}}</view>
                <view class="label">健康评分</view>
                <view class="status" :class="report.status">{{report.statusText}}</view>
            </view>
        </view>
        
        <!-- 指标分析 -->
        <view class="section">
            <view class="title">指标分析</view>
            <view class="indicators">
                <view class="indicator" v-for="(item, index) in report.indicators" :key="index">
                    <view class="name">{{item.name}}</view>
                    <view class="value" :class="item.status">{{item.value}}{{item.unit}}</view>
                    <view class="trend" :class="item.trend">
                        <u-icon :name="item.trend === 'up' ? 'arrow-up' : 'arrow-down'" size="24" :color="item.trend === 'up' ? '#FF4D4F' : '#52C41A'"></u-icon>
                        <text>{{item.change}}%</text>
                    </view>
                </view>
            </view>
        </view>
        
        <!-- 健康建议 -->
        <view class="section">
            <view class="title">健康建议</view>
            <view class="suggestions">
                <view class="suggestion" v-for="(item, index) in report.suggestions" :key="index">
                    <view class="icon">
                        <u-icon :name="item.icon" size="32" :color="item.color"></u-icon>
                    </view>
                    <view class="content">
                        <view class="title">{{item.title}}</view>
                        <view class="desc">{{item.desc}}</view>
                    </view>
                </view>
            </view>
        </view>
        
        <!-- 报告时间 -->
        <view class="section">
            <view class="time">报告生成时间：{{report.time}}</view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            report: {
                score: 85,
                status: 'good',
                statusText: '良好',
                time: '2024-03-15 10:00',
                indicators: [
                    {
                        name: '血压',
                        value: '120/80',
                        unit: 'mmHg',
                        status: 'normal',
                        trend: 'down',
                        change: 5
                    },
                    {
                        name: '血糖',
                        value: '5.6',
                        unit: 'mmol/L',
                        status: 'normal',
                        trend: 'up',
                        change: 2
                    },
                    {
                        name: '心率',
                        value: '75',
                        unit: '次/分',
                        status: 'normal',
                        trend: 'down',
                        change: 3
                    }
                ],
                suggestions: [
                    {
                        icon: 'heart',
                        color: '#FF4D4F',
                        title: '规律作息',
                        desc: '建议保持每天7-8小时的睡眠时间，避免熬夜'
                    },
                    {
                        icon: 'food',
                        color: '#52C41A',
                        title: '均衡饮食',
                        desc: '建议增加蔬菜水果摄入，减少高盐高脂食物'
                    },
                    {
                        icon: 'sport',
                        color: '#1890FF',
                        title: '适量运动',
                        desc: '建议每周进行3-5次中等强度运动，每次30分钟'
                    }
                ]
            }
        }
    },
    methods: {
        goBack() {
            uni.navigateBack()
        },
        shareReport() {
            uni.showToast({
                title: '分享成功',
                icon: 'success'
            })
        }
    }
}
</script>

<style lang="scss">
.container {
    min-height: 100vh;
    background-color: #F7F7FA;
    
    .nav-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 30rpx;
        background-color: #fff;
        
        .title {
            font-size: 36rpx;
            font-weight: bold;
            color: #333;
        }
    }
    
    .section {
        background-color: #fff;
        padding: 30rpx;
        margin-bottom: 20rpx;
        
        .title {
            font-size: 28rpx;
            color: #333;
            font-weight: bold;
            margin-bottom: 20rpx;
        }
        
        .score-card {
            background-color: #F7F7FA;
            border-radius: 20rpx;
            padding: 40rpx;
            text-align: center;
            
            .score {
                font-size: 72rpx;
                color: #1890FF;
                font-weight: bold;
                margin-bottom: 10rpx;
            }
            
            .label {
                font-size: 28rpx;
                color: #666;
                margin-bottom: 20rpx;
            }
            
            .status {
                display: inline-block;
                padding: 10rpx 30rpx;
                border-radius: 30rpx;
                font-size: 24rpx;
                
                &.good {
                    background-color: #E6F7FF;
                    color: #1890FF;
                }
                
                &.normal {
                    background-color: #FFF7E6;
                    color: #FAAD14;
                }
                
                &.bad {
                    background-color: #FFF1F0;
                    color: #FF4D4F;
                }
            }
        }
        
        .indicators {
            .indicator {
                display: flex;
                align-items: center;
                padding: 20rpx 0;
                border-bottom: 2rpx solid #F7F7FA;
                
                &:last-child {
                    border-bottom: none;
                }
                
                .name {
                    width: 120rpx;
                    font-size: 28rpx;
                    color: #333;
                }
                
                .value {
                    flex: 1;
                    font-size: 28rpx;
                    font-weight: bold;
                    
                    &.normal {
                        color: #52C41A;
                    }
                    
                    &.warning {
                        color: #FAAD14;
                    }
                    
                    &.danger {
                        color: #FF4D4F;
                    }
                }
                
                .trend {
                    display: flex;
                    align-items: center;
                    font-size: 24rpx;
                    
                    &.up {
                        color: #FF4D4F;
                    }
                    
                    &.down {
                        color: #52C41A;
                    }
                    
                    text {
                        margin-left: 6rpx;
                    }
                }
            }
        }
        
        .suggestions {
            .suggestion {
                display: flex;
                align-items: flex-start;
                padding: 20rpx 0;
                border-bottom: 2rpx solid #F7F7FA;
                
                &:last-child {
                    border-bottom: none;
                }
                
                .icon {
                    margin-right: 20rpx;
                }
                
                .content {
                    flex: 1;
                    
                    .title {
                        font-size: 28rpx;
                        color: #333;
                        font-weight: bold;
                        margin-bottom: 10rpx;
                    }
                    
                    .desc {
                        font-size: 24rpx;
                        color: #666;
                        line-height: 1.5;
                    }
                }
            }
        }
        
        .time {
            font-size: 24rpx;
            color: #999;
            text-align: center;
        }
    }
}
</style> 